// 底部点击
document.querySelector(".footer-two").onclick = function () {
    location.href = "./haituan.html"
}
document.querySelector(".footer-three").onclick = function () {
    location.href = "./faxian.html"
}
document.querySelector(".footer-four").onclick = function () {
    location.href = "./user.html"
}
document.querySelector(".icon-dingxiang").onclick = function () {
    location.href = "./ditu.html"
    add()
}

// 底部点击变色
function changeColor(element) {
    // 首先移除所有活跃的div
    const footerDivs = document.querySelectorAll('#footer div');
    footerDivs.forEach(div => {
        div.classList.remove('active');
    });
    // 然后给当前点击的div添加活跃的class
    element.classList.add('active');
}

// 轮播图
function getBanner() {
    ajaxUsePromise02({
        url: "http://localhost:3000/bannerImgs",
        method: "get",
    }).then(res => {
        // console.log(res);
        cerabanner(res)
    })
}

let oImgBanners = document.getElementsByClassName('swiper-slide')
function cerabanner(data) {
    let htmlStr = ""
    // 假设 data 是一个数组，每个元素包含一个 img 属性
    for (let i = 0; i < data.length; i++) {
        // 获取每个 swiper-slide 元素
        let oImgBanner = oImgBanners[i];
        if (oImgBanner) {
            // 设置图片的 src 属性
            oImgBanner.innerHTML = `<img src="${data[i]}"></img>`;
        }
    }
}
// Swiper
var swiper = new Swiper(".mySwiper", {
    // direction: 'vertical', // 垂直切换选项
    autoplay: { // 自动切换
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },
    loop: false, // 循环模式选项
    pagination: {
        el: ".swiper-pagination",
    },
});




// 省市联动
// 定义全局变量来存储 AJAX 请求返回的数据
// let ajaxData = null;

// AJAX 请求函数
// function fetchData() {
//     $.ajax({
//         url: "http://localhost:3000/city",
//         method: "get",
//         success: function (response) {
//             // 成功获取数据后，将其存储在全局变量中
//             ajaxData = response[0];
//             // console.log(ajaxData);
//             // 重新渲染省份选项
//             showProvinceid();
//         },
//         error: function (error) {
//             // 处理错误情况
//             console.error("Error fetching data:", error);
//         }
//     });
// }

// function showProvinceid() {
//     let htmlStr = '';
//     if (ajaxData) {
//         for (let key in ajaxData) {
//             htmlStr += `<option>${key}</option>`;
//         }
//         document.querySelector('#provinceid').innerHTML = htmlStr;
//     }
// }

// function showcityId(provinceid) {
//     let htmlStr = '';
//     if (ajaxData && ajaxData[provinceid]) {
//         ajaxData[provinceid].forEach(element => {
//             htmlStr += `<option value="${element.cityNum}">${element.cityName}</option>`;
//         });
//         document.querySelector('#cityId').innerHTML = htmlStr;
//     }
// }


// 点击进入各列表区域
function OLisshow() {
    document.querySelector(".list-one").onclick = function () {
        location.href = "./delicacies.html"
    }
    document.querySelector(".list-two").onclick = function () {
        location.href = "./diet.html"
    }
    document.querySelector(".list-three").onclick = function () {
        location.href = "./beauty.html"
    }
    document.querySelector(".list-four").onclick = function () {
        location.href = "./Home.html"
    }
    document.querySelector(".list-five").onclick = function () {
        location.href = "./play.html"
    }
    document.querySelector(".seacher-min").onclick = function () {
        location.href = "./search.html"
    }
}

// 请求数据
async function getdata() {
    try {
        let response = await ajaxUsePromise02({
            url: "http://localhost:3000/books",
            method: "get",
        });
        // console.log(response);
        showdata(response)
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

// 数据渲染
function showdata(data) {
    console.log(data);
    let htmlStr = "";
    data.forEach((item, index) => {
        // console.log(index);
        htmlStr += `
        <div class="box" dataid="${item.id}">
        <div class="lef">
            <img src="${item.img}"alt="">
        </div>
        <div class="rig">
            <p>${item.name}</p>
            <p>${item.author}</p>
            <p>￥<span>${item.price}</span></p>
            <p>￥85.00</p>
            <p>258m</p>
            <input type="button" value="查看详情" class="actbutton">
        </div>
    </div>
        `
        document.querySelector(".activity").innerHTML = htmlStr;


        let oBtns = document.getElementsByClassName("box");

        for (let i = 0; i < oBtns.length; i++) {
            // 为每个元素绑定点击事件
            oBtns[i].onclick = function () {
                // console.log(oBtns[i]);
                // console.log(oBtns[i].getAttribute("dataid"));
                location.href = `./list.html?category=${oBtns[i].getAttribute("dataid")}`
            };
        }

    })
}


// 地理位置获取
function add() {
    let province = getCookie("province")
    let city = getCookie("city")

    let Addprovince = document.querySelector(".seacher-province")
    let Addcity = document.querySelector(".seacher-city")

    Addprovince.innerHTML = province;
    Addcity.innerHTML = city

    let iddressp = document.querySelector(".iddressp")
    if(Addprovince.innerHTML&&Addcity.innerHTML != ""){
        iddressp.style.display = "none"
    }

}

// 页面加载完成后执行的函数
window.onload = function () {
    // fetchData(); // 执行 AJAX 请求获取数据
    // showProvinceid();
    // showcityId(document.querySelector('#provinceid').value);
    // document.querySelector('#provinceid').onchange = function () {
    //     showcityId(this.value);
    // };
    getBanner();
    OLisshow();
    getdata()
    add()
}
